<template>
	<view>
		
		<view class="list" v-for="(item,index) in order_list" >
			<view class="boxcon">
				<view class="addressCon" v-if="1==item.serv_enum">
					<view class="linesolid"></view>
					<view class="addressname">
						<view class="drop"></view>
						<view class="detail">{{item.departure}}</view>
					</view>
					<view class="addressname mtop">
						<view class="drop"></view>
						<view class="detail">{{item.destination}}</view>
					</view>
				</view>
				<view v-else class="pu">
					<view class="ptitle">{{item.serv_name}}服务</view>
					<view class="pname">{{item.destination}}</view>
				</view>
				<view v-if="item.dis.length>4" class="small_km"><text class="bigkm">距离:</text>{{item.dis}}km</view>
				<view v-else class="km"><text class="bigkm">距离:</text>{{item.dis}}km</view>
			</view>
			<view class="look" @click="receiving(item.serv_order_id)">立即接单</view>
		</view>
		
		
		<view class="null"></view>
		<view class="foot">
			<view class="order" @click="order">
				<image src="../../../static/images/cc/order.png" mode="widthFix" class="oimg"></image>
				<view class="ordername">订单</view>
			</view>
			<view class="start" @click="open_auto_fresh">{{btn_msg}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_list:[],
				can_auto_load:false,
				auto_fresh:null,
				btn_msg:'开启抢单',
			}
		},
		
		onShow(){
			this.fresh_order();
		},
		onHide(){
			console.log(111)
			this.close_auto_fresh();
		},
		methods: {
			close_auto_fresh(){
				if(null == this.auto_fresh){return;}
				clearInterval(this.auto_fresh);
				this.auto_fresh = null;
				this.btn_msg = "开启抢单";
			},
			open_auto_fresh(){
				if(false==this.can_auto_load){
					return;
				}
				if(null === this.auto_fresh){
					this.auto_fresh = setInterval(()=>{
						this.fresh_order();
					},5*1000);
					this.btn_msg = "刷新列表中...";
				}else{
					this.close_auto_fresh();
				}
			},
			fresh_order(){
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function (r) {
						console.log('当前位置的经度：' + r.longitude);
						console.log('当前位置的纬度：' + r.latitude);	
						that.load_hall_order(r.latitude,r.longitude);
					}
				});	
			},
			async load_hall_order(lat,lng){
				let that = this;
				await uni.request({
					url: '/dispatch/server/getHallOrderList',
					data: {
						lat:lat,
						lng:lng,
					},
					method:"POST",
					success: res => {
						if(500==res.data.status){
							uni.showModal({
								title: '提示',
								content: res.msg,
								success: function (res) {
									if (res.confirm) {
										// pages/dispatch/bond/bond
										that.$wanlshop.auth('/pages/dispatch/bond/bond')
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							return;
						}
						if(501==res.data.status){
							uni.showModal({
								title: '提示',
								content: res.msg,
								success: function (res) {
									if (res.confirm) {
										that.$wanlshop.auth('/pages/dispatch/member/member')
									}
								}
							});
							return;
						}
						this.order_list = res.data.list;
						this.can_auto_load = res.data.can_auto_load
						// if(getCurrentPages().length>1){
						// 	uni.navigateBack();
						// }else{
						// 	uni.redirectTo({
						// 		url: '/pages/dispatch/releaseIndex/releaseIndex'
						// 	});
						// }
					},
					complete:()=>{
						// uni.hideLoading();
						// this.is_submit = false;
					}
				});	

			},
			receiving(order_id){
				uni.request({
					url: '/dispatch/server/takeOrders',
					data: {
						order_id:order_id,
					},
					method:"POST",
					success: res => {
						console.log(res);
						// this.order_list = res.data.list;
						// this.can_auto_load = res.data.can_auto_load
						// if(getCurrentPages().length>1){
						// 	uni.navigateBack();
						// }else{
						// 	uni.redirectTo({
						// 		url: '/pages/dispatch/releaseIndex/releaseIndex'
						// 	});
						// }
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/dispatch/success/success?order_id='+order_id
							})
						},300);
					},
					complete:()=>{
						setTimeout(()=>{
							this.fresh_order();	
						},100);
						// uni.hideLoading();
						// this.is_submit = false;
					}
				});	
				
			},
			order(){
				uni.navigateTo({
					url: '/pages/dispatch/myOrder/myOrder'
				})
			},
		}
	}
</script>

<style>
	.list {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		padding-bottom: 30rpx;
	}

	.look {
		width: 630rpx;
		height: 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #84BD00;
		color: #84BD00;
		font-size: 32rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		box-sizing: border-box;
	}

	.boxcon {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;
		padding: 40rpx 0;
	}

	.km {
		font-size: 36rpx;
		color: #84BD00;
	}
	.small_km{
		font-size: 26rpx;
		color: #84BD00;
	}

	.bigkm {
		font-size: 26rpx;
	}
	.linesolid:before{
		/* width: 14rpx;
		height: 14rpx;
		background-color: #D8D8D8;
		border-radius: 50%;
		margin-right: 20rpx; */
		border-radius: 50%;
		content: '';
		  position: absolute;
		  left: -8rpx;
		  width: 14rpx;
		  height: 14rpx;
		  background-color: #D8D8D8;
	}
	.linesolid::after{
		/* width: 14rpx;
		height: 14rpx;
		background-color: #D8D8D8;
		border-radius: 50%;
		margin-right: 20rpx; */
		border-radius: 50%;
		content: '';
		position: absolute;
		left: -8rpx;
		bottom: 0rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #D8D8D8;
	}
	.drop {
		width: 14rpx;
		height: 14rpx;
		/* background-color: #D8D8D8; */
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.addressCon {
		width: 400rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.linesolid {
		position: absolute;
		left: 7rpx;
		border-left: 1px dashed #D8D8D8;
		height: 60%;
	}

	.addressname {
		font-size: 30rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.detail {
		width: 400rpx;
	}
	.pname{
		width: 400rpx;
	}

	.mtop {
		margin-top: 20rpx;
	}

	.ptitle {
		font-size: 30rpx;
		color: #333333;
	}

	.pname {
		font-size: 26rpx;
		margin-top: 20rpx;
		color: #999999;
	}
	.foot{
		width: 750rpx;
		height: calc(120rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		box-shadow: 0px 17rpx 50rpx 0px rgba(0, 0, 0, 0.13);
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.order{
		width:118rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-content: center;
	}
	.start{
		width:612rpx;
		height: 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #84BD00;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.oimg{
		width: 50rpx;
		height: 50rpx;
	}
	.ordername{
		width: 100%;
		text-align: center;
		font-size: 20rpx;
		color: #3D3D3D;
	}
	.null{
		width: 100%;
		height: 150rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>